<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            height:2000px;
            width:2000px;
        }
    </style>
</head>

<body>
    <div class="box">
        这是一个盒子
    </div>

    <script>
        var box = document.querySelector('.box');

        console.log(getStyle(box,'fontSize'));
        console.log(scroll().top);
        console.log(scroll().left);
        console.log(client().width);
        console.log(client().height);

        //得到计算得的样式
        function getStyle(ele, attr) {
            if (ele.currentStyle) {
                return ele.currentStyle[attr];
            } else {
                return window.getComputedStyle(ele, null)[attr];
            }
        }
        //得到当前页面的 scrollTop 和scrollLeft
        function scroll() {
            return {
                top: pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
                left: pageXOffset || document.documentElement.scrollLeft || document.body.scrollLfet ||0 
            };
        }
        //得到当前页面的 clientWidth 和clientHeight
        function client(){
            return {
                width: innerWidth || document.documentElement.clientWidth || document.body.clientWidth ||0,
                height: innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
            };
        }

    </script>

</body>

</html>